السلام عليكم ورحمة الله وبركاتة 


بأذن الله سنستكمل الدرس السابق من دورة تصميم المواقع 
وساقوم بشرح كيفيية تصميم الواجهة ببرنامج الفوتوشوب 
وساحاول ان اشرح الفرونت بيج من خلال تصميم الواجههةه 
علما بان الدرس قد اعد للمبتدئين حيث ساقوم بالشرح المفصل الممل 


www.m-belal.com 
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یفترض بنا ان نکون قد حملنا برنامچ 2003 وهم ۲0١٤‏ وقمنا 


o 


سص يه 


قم بفتح البرنامج وذلك بالضغخط على زر ابدام كافة البرامج ثم 
Microsoft Office‏ واضغخط على ايقونة البرنامج 


Microsoft Office FrortFage 2O3 El 


ستظهر لك هذة الواجهة 


BEKES] iî Dads rer 


تقوم بادراج ثلاث جداول 
الخلية الاولى سنضع فيها الهيدر الذي معنا الرأس كما ذكرت في 
المقدمة 
والخلية الثانية ستكون للمحتوى 
والخلية الثالثة ستكون للفوتر او الذيل 
قم بالنقر على ايقونة ادراج الجداول كما موضح 


El Mıcrosoît FrontPage - new_page_1 htm 


: Fle E Wem Inset Format Inols Table Data Frames Window 


ما علينا فعله الان هو وضع صورة الهيدر التي قمنا بتصميمها في 
الدرس الاول في الخلية الاولى 
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$ 


وذلك عن طريق التأشير على الخلية الاولى المرقمة ب 1 فى الصور 
النقر على اداة ادراج الصور المرقمة ب 2 


Eile Edit Yew Inset Format Inols Table [Data Frames Window Help 
1 > E û >” ج ق د‎ EER ا قدا‎ 3 Li Normal 


new_page_1.htm* 


ERE ES 


اتضسع صورة فى الجدول عليتا التأتين على الجدول بالسغط 


fi al eof =A MN tN =‏ 
قي المگان القار خ تح ال EEA‏ ار ت اد اى ول 


TOTASEKbps SSI «248 Delauil Custom 


PICIUrE 


Lonk in: a images a 3 ” ادەإs‎ * 


My Recent 


mbelal_Ul mbelal_U3 


ل 


1 Filê narnë: | ETÊ اپ‎ 


MY Mektwmork. 


سنلاحظ ان الحدول اكبر من الصورة التى صممناها 
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ماذا ستنفعل ؟ هل سنعود الى الفوتوشوب ونصمم صورة اكبر لتملاً 


الفراغ 
بالتأكيد لا تابع معي 


جمية الحقوق محضوظة ل مصونة لال 


لتقليص حجم الجدول ليتناسب مع حجم الصورة سنقوم ما يلي 
نضغخط بالزر الامن على مكان فارغ داخل مساحة العمل ثم ختار 
Table properties‏ 
( خصائص الجدول ) 


| oe 
i Paste 
E Insert Rows 

E Insert Colurnns 


| Split Cells... 


pen Page in Mey Windom 


E | Manage Editable Regions... 


Lell Properties... 


| Table Properties... 


Page Properties...‏ ا 
A | Font...‏ 
a Hyperlink...‏ 


قم بتطبيق الاعدادات الموضحة فى الصورة 
رقم :1 لتوسيط الجدول 
رقم :2 , 3 , 4 قشص حدود الجدول 
رقم 5 : ركز معى , هذاالخيار لعرض الجدول وانا ازلت علامة الصح 
لكي تتقلص الى الى اقصى حد 
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لكن ايضا نستطيع اخذ عرض صورة الهيدر الذى هو 778ووضعة 
وهذة الطريقة الافضل 


LL 
Table Properties 
Layout Tools 
OEnable layout tools 
O pisable layout tools 


(®) Automatically enablë layout Fools based on table content 
Size 


Rows! 3 ll  Zalumns!: 1 


Layout 


Float: [Default 


well padding: 2F ESSE [LlSpecify height: 
° : 


Table Direction: ڪڪ‎ 

Boarders 
Size: 4 Light boarder: 7 Automatic 
Lolar: أ أ‎ Dark border: Automatic 


[I Eollapse table border 
Background 


Lalor: | | | Automatic 


[_lLlse barkground picture 


1 1 
| | BroYSE;,, 


Sek 
[lSet as default For new tables 


ستلاحظ الان ان الفراغ السابق الذى كان نتيجة عرض الجدول اكبر 
من عرض الصورة فد اختفى وايضا توسط الجدول الصفحة 
قم بالضغط على مفتاح انتر في الخلية رقم 2 لكي تتو 
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بعد ان وسعنا مساحة الخلية ستقوم بتقسيم الخلية 2 الى 3 خلايا 
اخرى لكن هذة المرة عمودية وليست افقية 
وذلك بالضغط على زر الماوس الا من داخل الخلية 2 واختيار ءااعء انام 
(تقسيم الخلاب ) 


El Paste 


i lngert Roms 

| Insert Columng 

els... 

Open Page in New indo 

Manage Editable Regions...‏ ا 
Cell Properties...‏ ا 

Table Properties...‏ حفوظة ل مدونة بلال 


Page Properties... 


Split Cells 


OfFor into columns 


O Spl into rams 


Number of columns: ٣ 


ستلاحظ بعد العملية السابقة ان الخلية الثانية الخاصة بالحتوى 
قد سمت الى اث خلایا عمودية 
سنتركها الخلايا الان جانبا وسننتقل الى تغخيير الخلفية ثم ستعود 


الى موضوع الخلاي 
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حسنا انا اقترح عليك قبل ان نغير الخلفية بأن تقوم بأحتساء كوب 
من الشاي او القهوة والتركيز معي 


جيد .. لنبداً بتغيير الخلفية لتتناسب مع صورة الهيدر والفوتر 
وكما موضح ان صورة الهيدر فيها زوائد بلون رصاصي ولكي 


ندمجها مع لون الخلفية 
نضغط بالزر الاين من الماوس على ماكن فارغ في ساحة العمل 
وختار 


page properties 
خصائص الصفحهة‎ 


"| Right Click FT OTE 


امنا ا 

Fa" Pasle 

3a |nsert Rows 
i | Insert Columns 
HEH) Split Cells... 


pen Page in Hew Winda 


2 Manage Editable Regions... 


Lell Properties... 
Table Properties... 
ججید‎ 
Aُِ Font... 
اا‎ Hyperlink... 
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ستفتح لنا نافذة فيها عدة تبويبات خص التعديل على الصفحة 
ما يهمنا الان هو التبويب ”1اا ”٣۲ه]‏ المرقم برقم 1 
قم بالخطوة رفم 2 م اختر 
more colors‏ 
مزيد من الالوان 
ادا كنت ترغب بوضع صورة للخلفية بدل من لون واحد تستطع 
فعل هذا كما موضح هي الخطورة ركم 4 
لكن هذا ليس موضوعنا الان فقط معلومة 
Bage Fropertiles:‏ 
Language |‏ ا General] Formatting idvanced | custom‏ ۱ 


Background 1 


PagEqr ound picture 


| Browse, ., 


Lalars 
Barkground: mm 0 k4 


Text! ink: Auıtamakiz ب‎ 


Aııtomakic 3 


| 


ستفتح لنا نافذة بها مجموعة من الخيارات لاختيار الاوان 
ختار اداة انتقاء اللون من ۲١٥1ء‏ ثم نقوم بالتأشير على اللون الزائد في 
الهيدر كما موضع 


3 1 


ا 


Mame: darkgray 


EEE EEE 
1 


E 


لنرى النتيجة 
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جميط الحقوق محفوظة ل مدوئة بلال 


نعود مرة اخرى الى الخلايا الثلاث التى قمنا بأنشاءها 
ما سنقوم به هو عمل حدود بسيطة للجدول کامل وتلوین الخلايا 
الثلاث الخاصة بالحتوى بلون قريب من لون الخلفية 
ولعمل هذ اضغخط بالزر الا من على مساحة المحتوى - الخلية 
الوسطى واختر 
Table properties‏ 
خصائص الخحدول 


Paste 
lser BOE 
Insert Colurnis 
` Split Cells... 
Open Fage in Mew Window 
د‎ MREGÊ Editable Regions... 


Lell Properties... 
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ضع قيمة 1 للحد كما هو موضح بالخطوة الاولى 
م اختر اللون الذي سنملاً به الخلايا الثلاث 
ويفضل ان يكون اللون قريب من لون الخلفية 
ان لم جد اللون المناسب من مجموعة الالوان ال 16 هذة تستطيع 
التوسع من خر more colore‏ 
بعد اختيار اللون وخديد قيمة الحد اضغط ok‏ 


f E 


TT 


Layout Tonls 

O Enable layout tools 

O Disable layout kaols 

(#) Automatically enable layout tools based on table content 
Siz 

Rows: ع‎ $ Zolumns: 3 
LayauE 


Alignment: [center ا‎ [ISperify width: 


Float: Default ا 8 1 يه‎ 
| 
1 


ell padding: 1 1 [Specify height: 


Zell spacing: | 1 1 ا‎ 


Table Direction: 


Borders 


3 


Size: 1 2 1 Light border: Automatic اب‎ 
Lalor: Automatic 1 Automate ¥ Dark boarder: Automatic | 


LI Callapse table E 
Background 


Document Zolars: 4 


E More Lolars,.. 


لاحظ شكل الواجهة كيف اصبح 
الان نريد ان نقوم بتقسيم الخلايا الثلاث 
وكل خلية ستقسم الى مجموعة من الخلايا 
وذلك اما عن طريق الضغط بالزر الا مين واختيار ءااءء نامء 
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[Oot into columns 


O Split into rams 


Number of columns: 


او عن طريق ادراج خلية اخرى داخل خليتنا الحالية 
وانا اخترت طريقة ادراج خلية جديدة 
لكي تفهمو اكثر من طريقة 
تابع 
حدد الخلفية الاولى بضغخطة واحدة ثم اختار ادراج 4 جداول 


: Normal + Times Mew Roman <> 302p >+|B ZF u = 


ستلاحظ ان الحدول قد توسع 
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وتستطيع ارجاعة الى طبيعتة بوضع الماوس على الحد الايسر له ثم 
السحب الى جهة اليمين كما موضح 


i 
1 
1 
1 
1 
1 
1 
1 


ما نرغب بفعلة في الخطوة التالية هو تغيير لون الخلية الاولى لكي 
تكون كعنوان للقائمة اليمين 
اضغط بالزر الامن واختر 
Cell properties‏ 
خصائص الخلية 


Right Click 


E 

lA,  Pasle 

ا 

| lpsert Rows 


ب 
jû Insert Column‏ 


TE) Split Cells... 


Dper Page in Mey Winda 


| Manage Editable Regions... 


E E 
e | 
4 E Praperıezs... 


Page Properties... 


A Font... 
@ Hyperlink... 


الان لديك الخيار بأختيار لون مربع عنوان القائمة 
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وكما قلنا سابقا ان لم جد طلبك من 


الالوان تستطيع الدخول الى 


مزید من الالوان 
More colore‏ 


Earkground س‎ 
._ mm 
[_[Ulse background 


| Aııtamakic 

Standard Zalars: 
MIEN 
HEEB 


Document Zolors: 


olor: 


SEE... 


value! Hex={27,27,27} 


| 


Automatic 


standard Zolors: 


Document Zolors: 


mM 
E ore Lolors... 


Name: 


Background . 
Lalor: 


[Use background 


| 


الخطوة التالية مهمة جداوهى كيفية تغبير شكل الحد فهناك عدة 
اشكال لحد الخلاي 
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مثل الحدود المنقطة والحدود المضاعفة .. الخ 


تابع 
قم بالنقر على الخلية المراد تغيير حدها بالزر الامن واختيار 
Cell properties‏ 


Right C 


lick 
٨ اا‎ 


Paste 


Insert Roms 

Insert Colurnris 
TEA Split Cells... 

Dpen Page in Hem Winda 
#4 Manage Editabla Regions... 


Cell Properties... 
1 


EEE 
ITS 


قم بالضغط علی زر عاراء 


tell Broperiies 
Layouk 


Horizontal alignment: [Default 1 3 [Specify width: 


wertical alignment: | Default @ 
Rows spanned: 1 1 [_lSpecify height: 
Lolumns spanned: 1 1 1 


[_ [Header cell 
[Na wrap well Direction: | Mone 
Boarders 


Lalor: أ‎ Light border: 


Aııtomakic ™ | 


Dark border: | [| Automatic ا‎ 
Background - ڪڪ‎ 


Color: | Automatic # ا‎ 


[IUlse background picture 


قم بالضغط على ا2اہ 
لتتفرع من عدة اختیارات ختار منها ۲ء ل0۲ اى الحدود 
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Gell Praperlles 


Bl Modify Style 


Name fselectorî; SEyle type: 
س ي‎ 


i lass: 


ا 


[ Preyieiy 
1 


Bord 
8 


par) Pestripkion 


Fant... 


a ma] [< J a J eww 


Border... 
uariberirig... 


Position... 


في الرقم 1 موضح انة هذا الحد جب ان يكون لجميع اجاهات الخلية 
وتستطيع استبعاد اخاة عن طريقة ew‌۷iءام‏ 


في الرقم 2 ختار لو الحد 
في الرقم 3 ختار شكل الحد كأن یکون وانا اخترته خط مضاعف 
فم اضغط )ه 
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Borders and Shading 


ڪڪ 
Borders | shading‏ | 


Setting: PreyiBy 


lick on buttons below to‏ اش 
Default apply borders‏ 


Padding 


Left: 


Right: n | Bottom: 


e > 4 


لاحظ كيف تخير حد القائمة 


الأن الخيار لك 
اما ان تقوم بأعادة الخطوات السابقة وتطبيقها على القائمة 
اليسرى 
او انك تقوم بنسخ القائمة اليمين ولتصقها في القائمة اليبسرى 
بالنسبة لي سأقوم بالنسخ 
نوشر بالزر الايسر من بداية القائمة نزولا الى اسفل كما موضح 
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SST 


اما ان نضغط بالزر الامن وختار رمه اي نسخ 
او نضغخط على زر النسخ من الشريط كما موضع بالصورة 


الان نذهب الى القائمة اليسرى ونعمل ءاءدم اى لصق 
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Right Cliek 
Î Cri 


E 
E le Roms 


احيانا قد تلصق القائمة الثانية غير متساوية مع الاأولى 
والصراحة لا اعرف طريقة الحل سوى بالطريقة التقليدية 
وذلك عن طريق مسح السطر الاخير الفارغ كما في الصورة 


الان قم بأنشاء قائمة ثالث وسطة لتضع بها الكلمة 
الترحيبية على سبيل المثال 
ثم قم بملىء قائمة اليمين والبسار ما يناسب موقعك 
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قم بأتباع الطريفة السابقة 
لائشاء جدول ايضا قم بأعطاءة 
اله لي بالك 
کم قم بالکانڈ فی الخانات کا 
پناسېك 


جميط الحقوق محضوظة ل مدونة بلال 


الان ختاج الى عمل روابط تربط بين الواجهة وبين اقسام موقعك 
الأاخرى 
قم بتظليل النص المطلوب خويلة الى رابط 
نم اضغط بالزر الاين واختار 
Hyperlink‏ 
الروابط التشعبية 


 |rsert Rows 


| Inaert Colamna 


| Split Cells... 


Lell Properties... 
Table Properties... 
Page Properties... 


١ 
کک‎ | 


قم بكتابة رابط القسم المطلوب الربط بة 
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لاحظ انه يوجد هناك خيارة سمه screen tip..‏ 
وفائدتة انة عند وضع مؤّشر الفأرة على الرابط يظهر كلام معين 
تكتبة انت 
Insert Hyperlink‏ 


Link to; Text to display: ا‎ 


|الصمدوضة 


1# Look in: | J my web Sites أ‎ & a E) 
Existing File or | _ ب س‎ & 3 

Web Page 
ا‎ Lurrenk 
Folder prte 


Place in This أ‎ Û images i ENT ۴ 

اذا گنا لر غب بطهور نص Document Browsed‏ 
Pages 2 2‏ 

j + 

Lreake New Recent 

Document | Files 


Address: http: fw. m-belal, corm الر ايبط آپ‎ 


E-mail Address | 


لنقل اننا لا نرغب بان يكون لون الرابط ازرق 
ونرغب بتغيير لون الرابط الى لون اخر 
كيف نفعل هذا ؟ .. بسیط جدا 
انقر بالزر الاين على مكان خالي واختر 
page properties‏ 
خصائص الصفحة 


3 
ê) lnsert Rows 


Insert Colurmhs 


HE Split Cells... 
س ڪڪ‎ 
| Open Page in Mew indore 

Manage Editable Regions...‏ | ا 


Lell Properties... 


Table Properties... 
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ستضهر لك نافذة اختر منها التبويب الثانى 
Formatting‏ 
اعرف ما يدور فی بالك 
نعم انها نفس النافذة التي قمنا بتغيير لون اللخلفية منها 
لاحظ انة يوجد خيار لتغيير لون النص العادى ايضا 
اختر ما يناسبك من الالوان واضغط )ه 


Fage Fropenles 


| General Formatting Advanced | Custom | Language | 


Background 


LJ Background picture لتلوين الروابط‎ 


| 


Lalars 
Background: ا‎ Hyperlink: 


Text: | Automatic Ww Visited hyperlink: Automatic 


Active hyperlink: | ll Automatic 


مرحبا بكم في الدورة التعايمبة الخاصة بتصسمبم الموافم | 


مع نحيات : یلال القاسا 


جميط الحقوق محفوظة ل مدونة بلال 
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ارجع مرة اخرى الى خصائص الصفحة page properties‏ 
وتوقف عند التبويب الأول 
هذا التبويب خاص تغبير عنوان الصفحة ووصف الموقع والكلمات 
الدليلية التي ستظهر في محرك البحث 
فمثلا عندما يبحث الشخص عن كلمة موقع بلال وانا قمت بوضع 
كلمة موقع بلال في الكلمات الدليلية فأنة فورا سيظهر محرك 
البحث موقعي ضمن نتائج البحث 
وايضا هناك خيار اخر لأضافة ملف صوتي للصفحه مثلا موسیقی 
او نشید او فر ان 
وحاليا لن نقوم بأستخدام هذا الخيار فقط معلومة 
mm‏ 
Fage Fropertiles‏ 
[General | Formatting | Advanced || Custom | Language |‏ 
Location: | unsaved: [linew_page_1 htm |‏ 
1 عتواآن الموقع موقع بلا داش Title:‏ 
| وصف الموقع و بلال للخدمات المنوعة Page description:‏ 


Keywords: RESEN GSES: ALB |الكلمات‎ | 


Base location: 


Default target frame: Î ا‎ 0 


Page Direction: Right-to-left e 
Background sound ۰ 
Location: ملفا صو لی‎ 1 


Loop: û Fortewer 


جميط الحقوق محفضوظة ل مدونة بلال 


بهذا نكون فد انتهينا من تصميم الواجهة وناتي للحفظ 
من شريط القوائم ختار قائمة ءانا نم نضغط على ك۸ ع۷ج» 
ای حفظ بأاسم 
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Wie |nzet Format 


Ltrl+ll 


Ltrl+S 


Publish Site.. 


Preview in Browser F 
Hl) Print... Ctrl+F 

Propertiez... 

Recent Eilas 


Recent Sites 


انتبة معى هذة الخطوة مهمة جدا 
ولكي تفتح الواجهة تلقائيا عند الدخول للموقع جب ان تكون 
index gun |‏ 


Saye As 


Save in: | Ê) m-belal ا‎ AIO & î EA” mols r 


FI, Recent 
Documents 


أن الملف : 


change title...‏ قح بلال القاسم 
MY Network E E‏ 
أ Places | Save as type: [web Pages‏ 


فى الخطوة التالية سيقوم لك اين ستحفظ الصور 
وفى شرحنا سنحفظة فى نفس الجلد الموجود فية ملف ×عء لد 
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فقط اضغط عه 
Save Embedded Files‏ 


Embedded files ta saye: Picture preview: 


EE Folder Action 
8 Tell Bl al | r Locumenks and... aE 
3| a= cl ME al | tL :{Cocuments and ... SAYE 


Multiple Irmagez Selected 


~Lhange Folder... Sek Action... Picture File Type, , 
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واخیرا ان كان هناك اي نقص في الدرىس ارجوا منكم اخباري به فورا 
على البريد التالي 
mbelalm @ gmail.com‏ 


تطبيق علس الدرس 
ارجوان ا تنسوني من صالح دعائکم 
قام بشرح الدرس : بلال فواز القاسم 


مدونة بلال القاسم 
www.m-belal.com‏ 
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